import { IComponentStyles, IStylesFunctionOrObject } from "@fluentui/foundation-legacy";
import { INavStyles, IStackProps, IStackSlots, IStackStyles, IStackTokens, IStyleFunctionOrObject, Stack } from "@fluentui/react";
import { FunctionComponent } from "react";
import Alymodel from "../../mysql_interface/model";
import Listitem from './listitem';


const navStyles: Partial<INavStyles> = {
    root: {
        width: 208,
        height: 350,
        boxSizing: 'border-box',
        border: '1px solid #eee',
        overflowY: 'scroll'
    },
};


type P = {
    files: Alymodel.Ifileurl[]
    teacherfiles: Alymodel.Iteachercoursefile[]
    courselist: Alymodel.IMcourse[]
    userCoures: Alymodel.IMcourse[],
    course?: Alymodel.IMcourse,
    catebag?: Alymodel.IMcatebag
}

const styles: IStyleFunctionOrObject<IStackProps, IStackStyles> = {
    root: {
        width: 336,
        backgroundColor: '#434343',
        height: 'calc(100vh - var(--el-header-height))',
        overflowY: 'auto',
        color: '#D9D9D9',
        zIndex: '75',
        position: 'fixed',
        top: 'var(--el-header-height)',
        left: 0,
        paddingBottom: 128,
        '&::-webkit-scrollbar': {
            width: 0
        }
    },
}

const banstyle: IStyleFunctionOrObject<IStackProps, IStackStyles> = {
    root: { backgroundColor: '#363636', height: '60px', lineHeight: '60px', color: '#ffffff', paddingLeft: '24px', paddingRight: '24px', }
}

const listStack: IStylesFunctionOrObject<IStackProps, IStackTokens, IComponentStyles<IStackSlots>> = {
    root: { height: '48px', paddingLeft: '24px', paddingRight: '24px', paddingTop: '12px', paddingBottom: '12px', cursor: 'pointer', position: 'relative' },
}

const VideoLeft: FunctionComponent<P> = (p) => {
    console.log("====>userCoures", p.courselist)
    return (
        <Stack styles={styles} >
            <Stack styles={{ root: { height: 60, lineHeight: '60px', fontSize: '18px', color: '#ffffff', textAlign: 'center', backgroundColor: '#363636', } }}>
                {p.catebag?.name}
            </Stack>
            {
                p.courselist.map((v, k) => {
                    const my = p.userCoures.find(e => e.ID === v.ID)
                    return (
                        <Listitem key={v.ID} lession={v.lession || []} course={v} my={my} ></Listitem>
                    )
                })
            }
        </Stack>
    )
}

export default VideoLeft